<template>
  <container class="container">
    <div class="wk_formulate" id="wk_formulate">
      <div class="left-box">
        <div class="page-header">
          <span class="title-item">运维计划制定</span>
          <span class="title-item" style="font-size: 16px">分配运维计划</span>
        </div>
        <a-form-model :form="staff" style="width: 80%; margin-left: 10%">
          <a-tree-select
            v-model="selectAreaId"
            :treeData="deptList"
            :replaceFields="{
              title: 'name',
              key: 'id',
              value: 'id',
              children: 'menuList',
            }"
            placeholder="请选择地区"
            tree-default-expand-all
          ></a-tree-select>
        </a-form-model>
        <a-row
          type="flex"
          justify="end"
          style="margin-top: 15px"
          v-show="selectAreaId"
        >
          <a-col :span="10">
            <a-button type="primary" @click="showCont">确认</a-button>
          </a-col>
          <a-col :span="8">
            <a-button type="info" @click="clear">取消</a-button>
          </a-col>
        </a-row>
        <div>
          <div
            class="waterfall-wrapper"
            style="height: 570px; overflow: scroll; margin-top: 15px"
          >
            <div
              v-for="(item, index) in showList"
              :key="index"
              @click="selectFn(item, index)"
              :class="item.id == isSelect ? 'select-box' : 'wk_a'"
              :ref="`div${item.id}`"
            >
              <div
                style="
                  display: flex;
                  padding-bottom: 20px;
                  border: 1px;
                  margin: 10px;
                "
              >
                <div style="margin-left: 50px; margin-top: 25px">
                  <img
                    v-if="isSelect == item.id"
                    src="../../../../assets/public/运维计划1.png"
                    alt
                  />
                  <img
                    v-else-if="isSelect != item.id"
                    src="../../../../assets/public/运维计划2.png"
                    alt
                  />
                </div>
                <div
                  style="
                    width: 150px;
                    margin-top: 50px;
                    margin-left: 80px;
                    color: #bebebe;
                  "
                >
                  <span
                    :class="{ wk_left: index == isSelect }"
                    style="font-size: 20px"
                    >{{ item.taskArea }}</span
                  >
                  <p
                    :class="{ wk_left: index == isSelect }"
                    style="font-size: 18px"
                  >
                    {{ item.name }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="widow-box" ref="infoWindow" v-show="isinfoWindow">
            <h3 class="h3">
              设备位置信息
              <a-icon
                class="guanbiicon"
                type="close-circle"
                @click="closeInfoWindow"
              />
            </h3>
            <ul>
              <li class="single">
                <p class="single-title">站点名称:</p>
                <p class="single-cent">{{}}</p>
              </li>
              <li class="single">
                <p class="single-title">设备标识(MN):</p>
                <p class="single-cent">{{}}</p>
              </li>
              <li class="single">
                <p class="single-title">企业名称:</p>
                <p class="single-cent">{{}}</p>
              </li>
              <li class="single">
                <p class="single-title">创建时间:</p>
                <p class="single-cent">{{}}</p>
              </li>
              <li class="single">
                <p class="single-title">设备名称:</p>
                <p class="single-cent">{{}}</p>
              </li>
              <li class="single">
                <p class="single-title">监测时间:</p>
                <p class="single-cent">{{}}</p>
              </li>
            </ul>
          </div> -->
        </div>
        <div class="arrange" v-show="selectAreaId">
          <a-button @click="distribution" style="margin: 0 20px" type="primary"
            >分配</a-button
          >
        </div>
        <!-- </div> -->
      </div>
      <div class="right-map">
        <div style="height: 100%">
          <el-amap class="amap-box" :amap-manager="amapManager" :events="events" :zoom="zoom" :vid="'amap-vue'"></el-amap>
        </div>
      </div>
      <a-modal
        title="分派任务"
        :visible="visibleA"
        :confirm-loading="confirmLoadingA"
        @cancel="handleCancel"
        :footer="null"
      >
        <a-form-model
          :model="rectangle"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="选择设备" mode="multiple">
            <a-select @change="changePoint" mode="multiple">
              <a-select-option
                v-for="(item, index) in maintenancePoint"
                :key="index"
                :value="item.id"
              >
                {{ item.monitorName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="任务名称">
            <a-input v-model="rectangle.name" />
          </a-form-model-item>
          <a-form-model-item label="计划开始时间">
            <a-date-picker
              v-model="rectangle.planStartTime"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              show-time
              type="date"
              placeholder="开始时间"
              style="width: 100%"
            />
          </a-form-model-item>
          <a-form-model-item label="计划结束时间">
            <a-date-picker
              v-model="rectangle.planEndTime"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              show-time
              type="date"
              placeholder="结束时间"
              style="width: 100%"
            />
          </a-form-model-item>
          <a-form-model-item label="间隔天数">
            <a-input v-model="rectangle.interval" />
          </a-form-model-item>
          <a-form-model-item label="是否紧急">
            <a-switch v-model="rectangle.isUrgent" />
          </a-form-model-item>
          <a-form-model-item label="备注">
            <a-textarea v-model="rectangle.note"  :rows="4" />
          </a-form-model-item>
        </a-form-model>
        <a-button type="primary" @click="affirm" style="margin-left: 100px"
          >确认</a-button
        >
        <a-button type="primary" @click="cancelBtn" style="margin-left: 150px"
          >取消</a-button
        >
      </a-modal>
    </div>
  </container>
</template>
<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
import { log, options } from "video.js";
let amapManager = new AMapManager(); // 新建生成地图画布
export default {
  name: "a-map",
  data() {
    let self = this;
    return {
      selectAreaId: "",
      key: "fcc4e13dba3a3fcb2f1de205455c5fea",
      center: [],
      form: this.$form.createForm(this, {
        name: "horizontal_login",
      }),
      isinfoWindow: false, //  是否显示窗口
      options: [], //  级联选择器数据
      path: [], //坐标
      showList: [], //展示列表
      showForm: {
        current: 1,
        size: 1000,
      },
      //运维区域选择
      staff: {
        userIds: "",
      },
      dept: {
        current: 1, //获取区域数据
        size: 200,
      },
      deptList: [], //用户ID
      markerArr: [], // 点标记数组
      //分派任务
      visibleA: false,
      confirmLoadingA: false,
      moment,
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      isList: false,
      show: false,
      //分配
      rectangle: {
        name: "", //任务名称"
        taskArea: "", //任务区域
        note: "", //string //备注
        status: "1", //int //任务状态 1为未开始 ,2为进行中, 3为已完成
        planStartTime: "", //long //计划开始时间
        planEndTime: "", //long //计划结束时间
        isUrgent: false,
        interval: "", //string //任务间隔
        operationPointId: "", //string //运维点
        equipmentId: "", //公司id
      },
      maintenancePoint: [],
      amapManager,
      mapStyle: "amap://styles/39ba2088b6b8fc67184833f73cceab4d",
      zoom: 10,
      map: "",
      isSelect: "",
      events: {
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.initPage();
          });
        },
      },
    };
  },
  methods: {
    changePoint(value) {
      this.rectangle.equipmentId = value.toString();
    },
    // handleChange(data, selectedOptions) {
    //   this.deptList.forEach((v) => {
    //     if (data == v.id) {
    //       this.path = this.disposeLocation(v.geom);
    //     }
    //   });
    //   this.polyGon();
    // },
    //取消按钮
    cancelBtn() {
      this.visibleA = false;
    },
    //关闭弹窗
    handleCancel(e) {
      console.log("点击关闭按钮");
      this.visibleA = false;
    },

    // handleSubmit(e) {
    //   e.preventDefault();
    //   this.form.validateFields((err, values) => {
    //     if (!err) {
    //       console.log("Received values of form: ", values);
    //     }
    //   });
    // },
    createIterator(items) {
      items.forEach((res) => {
        res.scopedSlots = { title: "custom" };
        if (res.menuList && res.menuList.length > 0) {
          return this.createIterator(res.menuList);
        }
      });
      return items;
    },
    onTouruChange(e) {
      console.log("current", e);
    },

    //获取区域名
    getDept() {
      this.$api.AreaFindByPage(this.$user.id).then((res) => {
        if (res.data.code == 0) {
          let data = res.data.data;
          let _list = this.createIterator(data);
          this.deptList = _list;
          console.log(this.deptList);
        } else {
          this.$message.info(res.data.errorMessage);
        }
        console.log(res);
      });
    },
    //初始化地图
    initPage() {
      this.map = this.amapManager.getMap();
    },
    //区域
    polyGon(data) {
      this.map.clearMap();
      let that = this;
      let polygonArray = [];
      data.forEach((res) => {
        let path = [];
        res.forEach((item) => {
          path.push(new AMap.LngLat(item[0], item[1]));
        });
        let polygon = new AMap.Polygon({
          path: path,
          fillColor: "rgba(0,176,255,0.75)",
          strokeColor: "rgba(128,216,255,0.73)",
          borderWeight: 1,
        });
        polygonArray.push(polygon);
      });
      that.map.add(polygonArray);
      that.map.setFitView(polygonArray);
    },

    //数据传入方式
    distribution() {
      this.visibleA = true;
      this.Equipmentid();
    },

    //点击确认
    showCont() {
      this.$api.getAreaFindPoint(this.selectAreaId).then((res) => {
        this.showList = res.data.data;
      });
    },
    affirm() {
      //将可视时间转为时间戳
      if (
        this.rectangle.name !== "" &&
        this.rectangle.planStartTime !== "" &&
        this.rectangle.planEndTime !== "" &&
        this.rectangle.note !== "" &&
        this.rectangle.interval !== ""
      ) {
        var planEndDate = new Date(this.rectangle.planEndTime).getTime();
        var planStartTime = new Date(this.rectangle.planStartTime).getTime();
        var Rectang = JSON.parse(JSON.stringify(this.rectangle)); //深拷贝
        Rectang.planEndTime = planEndDate;
        Rectang.planStartTime = planStartTime;
        this.$api.Api_save(Rectang).then((res) => {
          this.visibleA = false;
          this.rectangle = {};
          this.$message.info("新建任务成功");
        });
      } else {
        this.$message.info("输入不能为空");
      }
    },

    //获取设备点
    Equipmentid() {
      this.$api
        .getEquipmentInfoByUserId(this.rectangle.operationPointId)
        .then((res) => {
          console.log(res);
          this.maintenancePoint = res.data.data;
          this.markerList();
        });
      // this.$api
      // .getFindAreaGeomByAreaId(this.rectangle.operationPointId)
      // .then((res) => {
      //   console.log(res);
      // });
    },
    //清空数据
    clear() {
      this.showList = []; //级联选择数据
    },
    // 初始化地图点标记
    markerList() {
      this.map.remove(this.markerArr);
      this.markerArr = [];
      this.maintenancePoint.forEach((item) => {
        let icon = new AMap.Icon({
          size: new AMap.Size(28, 30),
          image: require("@/assets/public/运维计划1.png"),
          imageSize: new AMap.Size(28, 30),
          imageOffset: new AMap.Pixel(0, 0),
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(item.x, item.y),
          icon: icon,
        });
        marker.setExtData({ id: item.id });
        AMap.event.addListener(marker, "click", (e) => {
          this.selectFn(item);
          this.openinfoWindow(item);
          this.clickedMarker = e.target;
        });
        this.markerArr.push(marker);
      });
      this.map.add(this.markerArr);
      this.map.setFitView();
    },
    disposeLocation(data) {
      if (data == null) {
        return [];
      }
      let arr = [];
      try {
        data = data.replace("MULTIPOLYGON(((", "((");
        data = data.replace("POLYGON(((", "((");
        data = data.replace(")))", "))");
        let reg = /\(\((.*?[^\)])\)\)/g;
        let _location = data.match(reg);
        _location.forEach((item) => {
          item = item.replace("((", "");
          item = item.replace("))", "");
          let path = [];
          let _item = item.split(",");
          _item.forEach((_list) => {
            let temp = _list.split(" ");
            path.push([parseFloat(temp[0]), parseFloat(temp[1])]);
          });
          arr.push(path);
        });
      } catch (err) {
        console.log(err);
      }
      return arr;
    },
    // 点击设备方法
    selectFn(data) {
      console.log(data);
      let geom = this.disposeLocation(data.geom);
      this.polyGon(geom);

      // this.$nextTick(() => {
      //   this.$refs[`div${data.id}`][0].scrollIntoView(); //定位到第几条的滚动位置
      // });
      // this.rectangle.taskArea = data.taskArea; //任务区域
      this.rectangle.operationPointId = data.id; //运维点id
      this.isSelect = data.id;
      // this.openinfoWindow(data);
      // this.details = data;
      this.Equipmentid();
    },
    // 关闭窗口方法
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
  },

  //把全局的背景图片取消
  mounted() {
    this.infoWindow = new AMap.InfoWindow({
      isCustom: true,
      anchor: "middle-left",
      offset: new AMap.Pixel(40, -10),
    });
    this.$api.getAreaGetAllAreas().then((res) => {
      this.options.forEach((item) => {
      });
    });
    document
      .querySelector(".layout-content-main")
      .classList.add("none-background");
    this.getDept();
  },
  beforeRouteLeave(to, from, next) {
    document
      .querySelector(".layout-content-main")
      .classList.remove("none-background");
    next();
  },
};
</script>
<style>
/* Form表单label */
#wk_formulate .ant-form-item-label > label::after {
  content: "";
}
#wk_formulate .action-item {
  display: inline-block;
  width: 40px;
  height: 40px;
  color: #fff;
  text-align: center;
  background-color: #29423f;
  margin-right: 10px;
  margin-left: 8px;
}
/* 图标链接 */
#wk_formulate .circle {
  background-image: url(../../../../assets/public/地图绘制1.png);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: 10px 9px;
  margin-left: -1px;
}
#wk_formulate .ant-btn:hover,
.ant-btn:focus,
.ant-btn:active,
.ant-btn.active {
  text-decoration: none;
  background: none;
}
</style>
<style scoped>
.select-box {
  background: linear-gradient(#1e7151, #246369);
  background-color: rgba(31, 111, 82);
  border-radius: 9px;
}
.wk_a {
  background-color: rgba(26, 55, 50);
  border-radius: 9px;
}
.waterfall-wrapper {
  width: 95%;
  margin-left: 12px;
  margin-top: 12px;
}
.wk_left {
  color: #b7c939;
}
.wk_right {
  color: #37ddc0;
}
.wk_rightL {
  color: #207064;
}
</style>
<style scoped src="../../../../assets/style/pollution.css"></style>
<style scoped src="../../../../assets/style/pollution/exhaust.css"></style>
<style scoped lang="scss">
.wk_formulate {
  height: 99%;
}
.left-box {
  min-height: 97% !important;
}
.right-map {
  height: 94.7%;
}
// 信息窗体样式
.widow-box {
  width: 350px;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(18, 90, 48, 0.801);
  position: relative;
  .guanbiicon {
    color: #10a98e;
    font-size: 24px;
    float: right;
    // position: absolute;
    // right: 20px;
    // top: 20px;
  }
  .single {
    width: 100%;
    height: auto;
    display: flex;
    color: rgba(255, 255, 255, 0.7);
    .single-title {
      width: 35%;
      // text-align: right;
    }
    .single-cent {
      width: 65%;
    }
  }
}
::v-deep .ant-form-item-label label {
  color: #9fb043;
  font-size: 18px;
}

::v-deep .ant-form-item-children input {
  background-color: #29423f;
  border: none;
  color: #bebebe;
}

::v-deep .ant-btn:hover,
::v-deep .ant-btn:focus,
::v-deep .ant-btn:active,
::v-deep .ant-btn.active {
  text-decoration: none;
  background: #37ddc0;
}

::v-deep .ant-form-item {
  margin-right: 0px;
  width: 100%;
}

// ::v-deep .ant-form-item-label {
//   width: 22%;
// }

// ::v-deep .ant-form-item-control-wrapper {
//   width: 78%;
// }

::v-deep .ant-row {
  margin-bottom: 6px;
}
::v-deep .ant-pagination-item,
::v-deep .ant-select-selection {
  background-color: #1e3230;
  border: none;
}

::v-deep .ant-pagination-item a,
::v-deep .ant-select-arrow,
::v-deep .ant-select-selection__rendered {
  color: #bebebe;
}

::v-deep .ant-pagination-prev .ant-pagination-item-link,
::v-deep .ant-pagination-next .ant-pagination-item-link {
  background-color: #1e3230;
  border: none;
  color: #bebebe;
}

::v-deep .ant-pagination-total-text {
  color: #bebebe;
}
// ::v-deep .waterfall-wrapper {
//   overflow: hidden;
// }

::v-deep .scroll {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 2rem; //预留foot组件
  overflow-y: scroll;
}

.amap-box {
  width: 100%;
  height: 100%;
}

::-webkit-scrollbar {
  width: 10px;

  background-color: none;
}
::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: seagreen;
}
//最后两个按钮
.arrange {
  position: relative;
  left: 70%;
  margin-top: 25px;
}
.textarea {
  height: 150px;
}
.left-box {
  height: 100%;
}
//隐藏overflow: scroll的滚动条
::-webkit-scrollbar {
  display: none;
}
</style>